import { tv } from 'tailwind-variants'

const variants = tv({
  base: ''
})

export default ({ className }: { className: string }) => {
  return (
    <div className={variants({ className })}>
      <svg
        className="h-full w-full"
        viewBox="0 0 2000 1000"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          className="fill-primary"
          d="M0 755.26c21-94.621 63-342.47 105-473.107 42-130.636 63-165.412 105-180.073 42-14.662 63 69.315 105 106.767s63 19.514 105 80.494c42 60.98 63 255.79 105 224.407 42-31.383 63-322.131 105-381.321 42-59.19 63 28.212 105 85.37 42 57.159 63 125.735 105 200.421 42 74.686 63 118.536 105 173.01 42 54.472 63 110.017 105 99.356 42-10.66 63-110.204 105-152.66 42-42.457 63-16.707 105-59.624 42-42.916 63-201.37 105-154.96 42 46.411 63 324.276 105 387.015 42 62.74 63-5.918 105-73.316 42-67.399 63-217.494 105-263.674 42-46.18 63 46.857 105 32.772 42-14.084 63-43.613 105-103.193 42-59.579 84-155.762 105-194.703l5 891.759H0Z"
        />
        <path
          fill="none"
          strokeWidth="4"
          className="stroke-primary"
          d="M0 755.26c21-94.621 63-342.47 105-473.107 42-130.636 63-165.412 105-180.073 42-14.662 63 69.315 105 106.767s63 19.514 105 80.494c42 60.98 63 255.79 105 224.407 42-31.383 63-322.131 105-381.321 42-59.19 63 28.212 105 85.37 42 57.159 63 125.735 105 200.421 42 74.686 63 118.536 105 173.01 42 54.472 63 110.017 105 99.356 42-10.66 63-110.204 105-152.66 42-42.457 63-16.707 105-59.624 42-42.916 63-201.37 105-154.96 42 46.411 63 324.276 105 387.015 42 62.74 63-5.918 105-73.316 42-67.399 63-217.494 105-263.674 42-46.18 63 46.857 105 32.772 42-14.084 63-43.613 105-103.193 42-59.579 84-155.762 105-194.703"
        />
        <g className="fill-surface">
          <circle cy="755.26" r="8" />
          <circle cx="105" cy="282.153" r="8" />
          <circle cx="210" cy="102.08" r="8" />
          <circle cx="315" cy="208.847" r="8" />
          <circle cx="420" cy="289.341" r="8" />
          <circle cx="525" cy="513.748" r="8" />
          <circle cx="630" cy="132.427" r="8" />
          <circle cx="735" cy="217.798" r="8" />
          <circle cx="840" cy="418.218" r="8" />
          <circle cx="945" cy="591.227" r="8" />
          <circle cx="1050" cy="690.584" r="8" />
          <circle cx="1155" cy="537.923" r="8" />
          <circle cx="1260" cy="478.3" r="8" />
          <circle cx="1365" cy="323.34" r="8" />
          <circle cx="1470" cy="710.355" r="8" />
          <circle cx="1575" cy="637.039" r="8" />
          <circle cx="1680" cy="373.365" r="8" />
          <circle cx="1785" cy="406.137" r="8" />
          <circle cx="1890" cy="302.944" r="8" />
          <circle cx="1995" cy="108.241" r="8" />
        </g>
      </svg>
    </div>
  )
}
